﻿@page "/DatePicker/Format"

@using Syncfusion.Blazor.Calendars
@using Syncfusion.Blazor.DropDowns
@using Newtonsoft.Json
@inherits SampleBaseComponent;

<SampleDescription>
   <p>In this sample, the DatePicker has been configured with the <code>dd-MMM-yy</code> date format.</p>
</SampleDescription>
<ActionDescription>
    <p>Date Formats sample explains the support of custom date format in the DatePicker component by using the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DatePickerModel.html#Syncfusion_Blazor_Calendars_DatePickerModel_Format' target='_blank'> Format</a> property.</p>
    <p>More information on the date format configuration can be found in the <a href='https://blazor.syncfusion.com/documentation/datepicker/date-format/' target='_blank'>documentation section</a>.</p>
</ActionDescription>

<div>
    <div class="control-section col-lg-8 date-height">
        <div id="wrapper" class="datepicker-section">
            <div id="datepicker-control">
                <SfDatePicker TValue="DateTime?" Value="@DateValue" Format="@formatString">
                </SfDatePicker>
            </div>
        </div>
    </div>
    <div class="col-lg-4 property-section">
        <div>
            <SfDropDownList TItem="DateFormat" TValue="string" PopupHeight="230px" @bind-Index="@index" DataSource="@formats">
                <DropDownListEvents TItem="DateFormat" TValue="string" ValueChange="OnChange"></DropDownListEvents>
                <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
            </SfDropDownList>
        </div>
    </div>
</div>

<style>
    #wrapper {
        max-width: 246px;
        margin: 0px auto;
        padding-top: 20px;
    }

    .control-section.col-lg-8.date-height {
        border-right: 1px solid #D7D7D7;
        min-height: 365px;
    }

    .property-section {
        top: 55px;
        width: 200px;
        margin-left: 80px;
        padding-bottom: 15px;
    }
</style>

@code {
    private int? index { get; set; } = 0;
    public DateTime DateValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 10);
    private string textValue { get; set; }
    public class DateFormat
    {
        public string ID { get; set; }

        public string Text { get; set; }
    }
    public string formatString { get; set; } = "dd-MMM-yy";
    private List<DateFormat> formats = new List<DateFormat>() {
        new DateFormat(){ ID= "format1", Text= "dd-MMM-yy" },
        new DateFormat(){ ID= "format2", Text= "yyyy-MM-dd" },
        new DateFormat(){ ID= "format3", Text= "dd-MMMM" },
     };
    public void OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DateFormat> args)
    {
        this.formatString = args.ItemData?.Text;
    }
}
